<template>
  <Card>
    <div class="searchBox">
      <Form ref="searchForm" :label-width="90" :model="searchForm" class="search-form" inline>
        <Form-item label="月份：" prop="month">
          <DatePicker
            v-model="searchForm.month"
            placeholder="请选择月份"
            placement="bottom-start"
            style="width: 200px"
            type="month"
            @on-change="searchForm.month=$event"
          ></DatePicker>
        </Form-item>
        <Form-item label="车牌号：" prop="license_plate_num">
          <Input
            v-model="searchForm.license_plate_num"
            clearable
            placeholder="支持模糊搜索"
            style="width: 200px"
            type="text"
          />
        </Form-item>
        <Form-item style="margin-left:-90px;">
          <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
          <Button @click="handleReset">重置</Button>
        </Form-item>
      </Form>
    </div>
    <div class="table">
      <Row>
        <Table
          ref="table"
          :columns="columns"
          :data="data"
          :loading="loading"
          border
          size="small"
          @on-selection-change="showSelect"
        ></Table>
      </Row>
      <Row class="page" justify="end" type="flex">
        <Page
          :current="searchForm.pageNumber"
          :page-size="searchForm.pageSize"
          :total="total"
          show-total
          @on-change="changePage"
        />
      </Row>
    </div>
  </Card>
</template>
<script>
import './vehicle.css'
import {busIsCheckList, updateIsCheck} from '../../api/bus'

export default {
  data() {
    return {
      modal: false,
      total: 0,
      selectCount: 0, // 多选计数
      selectList: [], // 多选数据
      searchForm: {
        license_plate_num: '',
        month: '',
        pageNumber: 1, // 当前页数
        pageSize: 10 // 页面大小
      },
      editIsCheck: null,
      loading: false,
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '月份',
          key: 'month',
          align: 'center',
          fixed: 'left'
        },
        {
          title: '车牌号',
          key: 'license_plate_num',
          align: 'left'
        },
        {
          title: '是否纳入考核',
          key: 'is_check',
          align: 'center',
          render: (h, params) => {
            // 0：否, 1：是
            if (params.row.edit) {
              return h(
                'RadioGroup',
                {
                  props: {
                    value: params.row.is_check
                  },
                  on: {
                    'on-change': val => {
                      this.editIsCheck = val
                    }
                  }
                },
                [
                  h(
                    'Radio',
                    {
                      props: {
                        label: 1
                      }
                    },
                    '是'
                  ),
                  h(
                    'Radio',
                    {
                      props: {
                        label: 0
                      }
                    },
                    '否'
                  )
                ]
              )
            } else {
              return h('span', {}, params.row.is_check === 0 ? '否' : '是')
            }
          }
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            if (params.row.edit) {
              return h('div', [
                h(
                  'span',
                  {
                    style: {
                      cursor: 'pointer',
                      color: '#19be6b'
                    },
                    on: {
                      click: () => {
                        if (this.editIsCheck !== null) {
                          updateIsCheck(
                            {is_check: this.editIsCheck},
                            params.row.id
                          ).then(res => {
                            if (res.data) {
                              this.data[
                                params.index
                                ].is_check = this.editIsCheck
                              this.$Message.success(res.message)
                            } else {
                              this.$Message.error(res.message)
                            }
                            this.data[params.index].edit = false
                          })
                        } else {
                          this.data[params.index].edit = false
                        }
                      }
                    }
                  },
                  '保存'
                ),
                h(
                  'span',
                  {
                    style: {
                      cursor: 'pointer',
                      color: '#2db7f5',
                      'margin-left': '20px'
                    },
                    on: {
                      click: () => {
                        this.data[params.index].edit = false
                      }
                    }
                  },
                  '取消'
                )
              ])
            } else {
              return h('div', [
                h(
                  'span',
                  {
                    style: {
                      cursor: 'pointer',
                      color: 'red'
                    },
                    on: {
                      click: () => {
                        this.editIsCheck = null
                        this.data[params.index].edit = true
                      }
                    }
                  },
                  '编辑'
                )
              ])
            }
          }
        }
      ],
      data: [],
      dataCopy: []
    }
  },
  watch: {
    $route(to, from) {
      if (from.name !== 'busIsCheck') {
        this.handleReset()
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getBusList()
    },
    getBusList() {
      this.loading = true
      busIsCheckList(this.searchForm).then(res => {
        this.loading = false
        if (res.data) {
          this.data = res.data.personnel
          this.total = res.data.count
        }
      })
    },
    handleReset() {
      this.searchForm = {
        pageNumber: 1,
        pageSize: 10,
        license_plate_num: '',
        month: ''
      }
      // 重新加载数据
      this.getBusList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getBusList()
    },
    init() {
      this.getBusList()
    },
    showSelect(e) {
      this.selectList = e
      this.selectCount = e.length
    }
  }
}
</script>
